<template>
  <!--最终检验-->
  <div class="app-container">
    <el-form class="jc_search_wrap" v-model="searchList">
      <label>单晶编号</label><el-input v-model="searchList.crystalNo"></el-input>
      <label>检验时间</label>
      <!-- <el-input type="date" v-model="searchList.date1"></el-input>至<el-input type="date" v-model="searchList.date2"></el-input> -->
            <label>开始时间:</label>
              <el-date-picker
                v-model="startDate"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
              <label>结束时间:</label>
              <el-date-picker
                v-model="endDate"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
      <el-button @click="searchRows"><i class="el-icon-search"></i>查询</el-button>
    </el-form>
    <el-button-group class="jc_btn_wrap jc_btn_left">
      <el-button @click="editRow"><i class="jc_icon "></i>编辑</el-button>
      <el-button @click="deleteRows"><i class="jc_icon "></i>删除</el-button>
      <el-button @click="exportRows"><i class="jc_icon "></i>导出</el-button>
      <!--<el-button @click="importData"><i class="jc_icon "></i>导入</el-button>-->
      <el-button @click=""><i class=""></i>打印</el-button>
    </el-button-group>
    <el-table :data="list"  :height="tableHeight"  border fit highlight-current-row class="jc_table_wrap"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="80px">
      </el-table-column>
      <el-table-column label='操作'>
        <template scope="scope">
          <el-button type="text" @click="detailRow(scope.row.id)">详情</el-button>
        </template>
      </el-table-column>
      <el-table-column label='单晶编号' width="230">
        <template scope="scope">
          {{scope.row.crystalNo}}
        </template>
      </el-table-column>
      <el-table-column label='切割刀号'>
        <template scope="scope">
          {{scope.row.cutNo}}
        </template>
      </el-table-column>
      <el-table-column label='总送验数' >
        <template scope="scope">
          {{scope.row.sendcheckNum}}
        </template>
      </el-table-column>
      <el-table-column label='理论片数' >
        <template scope="scope">
          {{scope.row.theorySlice}}
        </template>
      </el-table-column>
      <el-table-column label='线径'>
        <template scope="scope">
          {{scope.row.lineDiameter}}
        </template>
      </el-table-column>
      <el-table-column label='槽轮系数' >
        <template scope="scope">
          {{scope.row.groovesRatio}}
        </template>
      </el-table-column>
      <el-table-column label='送验人' >
        <template scope="scope">
          {{scope.row.sendchecker}}
        </template>
      </el-table-column>
      <el-table-column label='送验时间' width="200">
        <template scope="scope">
          {{scope.row.sendchecktime}}
        </template>
      </el-table-column>
      <el-table-column label='接收人'>
        <template scope="scope">
          {{scope.row.picker}}
        </template>
      </el-table-column>
      <el-table-column label='接收时间' width="200">
        <template scope="scope">
          {{scope.row.picktime}}
        </template>
      </el-table-column>
    </el-table>
    <!--<el-pagination layout="prev, pager, next" :total="total" @current-change="changePage" :page-size="10"/>-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="changePage"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!--编辑-->
    <el-dialog title="编辑" :visible.sync="edit_visible" class="jc_dialog_wrap">
      <el-form :model="form_edit" label-width="120px">
        <el-form-item label="单晶编号">
          <el-input v-model="form_edit.crystalNo"></el-input>
        </el-form-item>
        <el-form-item label="切割刀号">
          <el-input v-model="form_edit.cutNo"></el-input>
        </el-form-item>
        <el-form-item label="总送验数">
          <el-input v-model="form_edit.sendcheckNum"></el-input>
        </el-form-item>
        <el-form-item label="理论片数">
          <el-input v-model="form_edit.theorySlice"></el-input>
        </el-form-item>
        <el-form-item label="线径">
          <el-input v-model="form_edit.lineDiameter"></el-input>
        </el-form-item>
        <el-form-item label="槽轮系数">
          <el-input v-model="form_edit.groovesRatio"></el-input>
        </el-form-item>
        <el-form-item label="送验人">
          <el-input v-model="form_edit.sendchecker"></el-input>
        </el-form-item>
        <el-form-item label="送验时间">
          <el-input v-model="form_edit.sendchecktime"></el-input>
        </el-form-item>
        <el-form-item label="接收人">
          <el-input v-model="form_edit.picker"></el-input>
        </el-form-item>
        <el-form-item label="接收时间">
          <el-input v-model="form_edit.picktime"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEditForm">确定</el-button>
        <el-button @click="edit_visible=false">取消</el-button>
      </div>
    </el-dialog>
    <!--导入-->
    <!--<el-dialog title="导入" :visible.sync="import_visible" class="jc_dialog_wrap">
      <el-form class="jc_search_wrap" enctype="multipart/form-data">
        <label>选择文件</label>
        <input type="file" multiple="multiple" id="file" :disabled="importInfo">
        <span>文件大小不可超过30M</span>
      </el-form>
      <p v-show='importInfo' style="color: red;font-size: 16px;text-align: center;">请稍定，正在请求文件</p>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitImportForm" :disabled="importInfo">确定</el-button>
        <el-button @click="import_visible=false">取消</el-button>
      </div>
    </el-dialog>
    <div class="el-loading-mask el-loading-fade-enter-to" v-loading.body="isShow" element-loading-text="请稍等，拼命加载中" v-show="isShow">
    </div>-->
    <el-dialog  :visible.sync="dialogVisible"  center class="forms">
          <div class="app-container">
    <h1 style="text-align: center;">检验报告单</h1>
    <table class="jc_table jc_table_detail">
      <tr>
        <td>切割刀号</td>
        <td colspan="2">{{form.cutNo}}</td>
        <td>单晶编号</td>
        <td colspan="2">{{form.crystalNo}}</td>
        <td>货架号/层</td>
        <td>{{form.shelfNumber}}</td>
        <td>理论片数</td>
        <td>{{form.theorySlice}}</td>
        <td>线径</td>
        <td>{{form.lineDiameter}}</td>
        <td>槽轮系数</td>
        <td>{{form.groovesRatio}}</td>
      </tr>
      <tr>
        <td rowspan="2">清洗送检片数</td>
        <td>第1批</td>
        <td>第2批</td>
        <td>第3批</td>
        <td>第4批</td>
        <td>第5批</td>
        <td>第6批</td>
        <td>第7批</td>
        <td>第8批</td>
        <td>第9批</td>
        <td>总送验数</td>
        <td colspan="2">送验人/时间</td>
        <td></td>
      </tr>
      <tr>
        <td>{{form.sendcheck1}}</td>
        <td>{{form.sendcheck2}}</td>
        <td>{{form.sendcheck3}}</td>
        <td>{{form.sendcheck4}}</td>
        <td>{{form.sendcheck5}}</td>
        <td>{{form.sendcheck6}}</td>
        <td>{{form.sendcheck7}}</td>
        <td>{{form.sendcheck8}}</td>
        <td>{{form.sendcheck9}}</td>
        <td>{{form.sendcheckNum}}</td>
        <td colspan="2">送验人/时间</td>
        <td>{{form.sendchecker}}/{{form.sendchecktime}}</td>
      </tr>
      <tr>
        <td colspan="14" style="text-align: center;font-weight: 600">检验记录</td>
      </tr>
      <tr>
        <td rowspan="4">分选仪检验</td>
        <td class="font_bold">A(合格)</td>
        <td>崩</td>
        <td>脏</td>
        <td>尺寸</td>
        <td>厚度不良</td>
        <td>TTV</td>
        <td>翘曲度</td>
        <td>弯曲度</td>
        <td>缺口</td>
        <td>线痕</td>
        <td>孔</td>
        <td>隐裂</td>
        <td>测定不能</td>
      </tr>
      <tr>
        <td>{{form.apass}}</td>
        <td>{{form.chip}}</td>
        <td>{{form.dirt}}</td>
        <td>{{form.size}}</td>
        <td>{{form.thickbig}}</td>
        <td>{{form.ttv}}</td>
        <td>{{form.qiaoqudu}}</td>
        <td>{{form.wanqudu}}</td>
        <td>{{form.breakage}}</td>
        <td>{{form.roughness}}</td>
        <td>{{form.pinhole}}</td>
        <td>{{form.crack}}</td>
        <td>{{form.unmeasurable}}</td>
      </tr>
      <tr>
        <td class="font_bold">B(合格)</td>
        <td>A-</td>
        <td>倒篮</td>
        <td>叠片</td>
        <td>裂片</td>
        <td colspan="2" class="font_bold">操作员</td>
        <td colspan="2" class="font_bold">分选仪</td>
        <td colspan="2" class="font_bold">班组</td>
        <td colspan="2" class="font_bold">日期/时间</td>
      </tr>
      <tr>
        <td>{{form.bpass}}</td>
        <td>{{form.areduce}}</td>
        <td>{{form.daolan}}</td>
        <td>{{form.diepian}}</td>
        <td>{{form.fragment}}</td>
        <td colspan="2">{{form.fxyTester}}</td>
        <td colspan="2">{{form.fxyNo}}</td>
        <td colspan="2">{{form.fxyClass}}</td>
        <td colspan="2">{{form.fxyTime}}</td>
      </tr>
      <tr>
        <td class="font_bold">合格片数</td>
        <td colspan="6">{{form.passnum}}</td>
        <td colspan="2" class="font_bold">不合格片数</td>
        <td colspan="5">{{form.notpassnum}}</td>
      </tr>
      <tr>
        <td rowspan="4">外观检验</td>
        <td>粘胶面角崩</td>
        <td>粘胶面面崩</td>
        <td>入刀口角崩</td>
        <td>入刀口面崩</td>
        <td>脏</td>
        <td>花</td>
        <td>油污</td>
        <td>黑边</td>
        <td>水印</td>
        <td>胶</td>
        <td>线痕</td>
        <td>白斑</td>
        <td>皮带印</td>
      </tr>
      <tr>
        <td>{{form.zjmjb}}</td>
        <td>{{form.zjmmb}}</td>
        <td>{{form.rdkjb}}</td>
        <td>{{form.rdkmb}}</td>
        <td>{{form.zang}}</td>
        <td>{{form.hua}}</td>
        <td>{{form.youwu}}</td>
        <td>{{form.heibian}}</td>
        <td>{{form.shuiyin}}</td>
        <td>{{form.jiao}}</td>
        <td>{{form.xianhen}}</td>
        <td>{{form.baibang}}</td>
        <td>{{form.pidaiyin}}</td>
      </tr>
      <tr>
        <td>不平</td>
        <td>孔</td>
        <td>裂</td>
        <td>缺口</td>
        <td>立面黑</td>
        <td>划痕</td>
        <td>头尾</td>
        <td>灰皮</td>
        <td>色差</td>
        <td>亮边</td>
        <td>黑道</td>
        <td>检损</td>
        <td></td>
      </tr>
      <tr>
        <td>{{form.buping}}</td>
        <td>{{form.kong}}</td>
        <td>{{form.lie}}</td>
        <td>{{form.quekou}}</td>
        <td>{{form.limianhei}}</td>
        <td>{{form.huahen}}</td>
        <td>{{form.touwei}}</td>
        <td>{{form.huipi}}</td>
        <td>{{form.secha}}</td>
        <td>{{form.liangbian}}</td>
        <td>{{form.heidao}}</td>
        <td>{{form.jiansun}}</td>
        <td></td>
      </tr>
      <tr>
        <td rowspan="2">参数检验</td>
        <td>薄</td>
        <td>厚</td>
        <td>P高</td>
        <td>P低</td>
        <td>TTV</td>
        <td>WARP</td>
        <td>同心度异常</td>
        <td>其他</td>
        <td class="font_bold">检验员</td>
        <td class="font_bold" colspan="2">班组</td>
        <td class="font_bold" colspan="2">日期/时间</td>
      </tr>
      <tr>
        <td>{{form.bao}}</td>
        <td>{{form.hou}}</td>
        <td>{{form.pgao}}</td>
        <td>{{form.pdi}}</td>
        <td>{{form.csTtv}}</td>
        <td>{{form.csWarp}}</td>
        <td>{{form.csTxdyc}}</td>
        <td>{{form.qita}}</td>
        <td colspan="2">{{form.canshuTester}}</td>
        <td colspan="2">{{form.canshuClass}}</td>
        <td colspan="2">{{form.canshuTesttime}}</td>
      </tr>
      <tr>
        <td class="font_bold">合格片数</td>
        <td colspan="6">{{form.canshuHgps}}</td>
        <td colspan="2" class="font_bold">不合格片数</td>
        <td colspan="5">{{form.canshuBhgps}}</td>
      </tr>
      <tr>
        <td>备注</td>
        <td colspan="13">{{form.beizhu}}</td>
      </tr>
    </table>
  </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>

  import * as Finaltest from "../../api/report/finaltest";
  var moment = require('moment');
  export default {
    components: {

    },
    data() {
      return {
        searchList: {pageSize: '',crystalNo: '',date1: '',date2: ''},
        list: [],
        total: 0,
        create_visible: false,
        detail_visible: false,
        edit_visible: false,
        form_create: {},
        form_detail: {},
        form_edit: {},
        multipleSelection: [],
        crystalNo: '',
        // date1: '',
        // date2: '',
        startDate:'',
        endDate:'',
        import_visible: false,
        importInfo: false,
        isShow: false,
        pageSize: 10,
        currentPage: 1,
        dialogVisible:false,
        form:{}
      }

    },
    created() {
      // this.fetchData();
    },
    methods: {
      fetchData(p=1) {
        this.listLoading = true;
        this.searchList.pageNum = this.currentPage = p;
        this.searchList.pageSize = this.pageSize;
        Finaltest.getList(this.searchList).then(data => {
          //console.log('data',data.rows);
          this.list = data.rows;
          this.total = parseInt(data.total);
          this.listLoading = false;
        })

      },
      searchRows() {
        // this.searchList.date1 = moment(this.startDate).format('YYYY-MM-DD HH:mm:ss');
        // this.searchList.date2 = moment(this.endDate).format('YYYY-MM-DD HH:mm:ss');
        if( !this.startDate == ''){
          this.searchList.date1 = moment(this.startDate).format('YYYY-MM-DD HH:mm:ss');
        }else{
          this.searchList.date1 = ''
        }
        if(!this.endDate == ''){
            this.searchList.date2 = moment(this.endDate).format('YYYY-MM-DD HH:mm:ss');
        }else{
          this.searchList.date2 = ''
        }
        this.fetchData()
      },
      editRow() {
        if(this.multipleSelection.length === 0) {
          alert('请先勾选行');
        }else if(this.multipleSelection.length >= 2) {
          alert('每次只能查看一行数据，请只勾选一行');
        }else if(this.multipleSelection.length === 1){
          this.edit_visible = true;
          Finaltest.detailRow(this.multipleSelection[0].id).then(data => {
            this.form_edit = data.msg;
          });
        }
      },
      submitEditForm() {
        Finaltest.updateRow(this.form_edit).then(data => {
          this.edit_visible = false;
          this.fetchData();
        })
      },
      deleteRows() {
        if(this.multipleSelection.length===0) {
          alert('请选择行');
        }else {
          var ids = [];
          for(var i in this.multipleSelection) {
            ids.push(this.multipleSelection[i].id)
          }
          this.$confirm('此操作将永久删除该行数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            Finaltest.delRows({ids: ids.join(',')}).then(data => {
              this.fetchData();
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            })

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      changePage(p) {
        this.fetchData(p)
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.currentPage = 1;
        this.fetchData(1);

      },
      exportRows() {
        window.location.href=process.env.BASE_API+'/finaltest/export?crystalNo='+this.searchList.crystalNo+'&date1='+this.searchList.date1+'&date2='+this.searchList.date2;
      },
      importData() {
        this.import_visible = true;
        this.importInfo = false;
      },
      submitImportForm() {
        this.importInfo = true;
        $('#file').attr("disabled",true);
        //全部
        var file = $('#file')[0].files[0];
        var form = new FormData();
        form.append('file', file, file.name)
        Finaltest.importExal(form,data=>{
          this.import_visible = false;
          this.fetchData();
        });
      },
      detailRow(id) {
            this.dialogVisible = true
            this.loadDetailTable(id)
      },
      loadDetailTable(a){
        Finaltest.detailRow(a).then(data => {
          this.form = data.msg;
        });
      }
    },
    computed: {
      tableHeight() {
        const filterHeight = 28
        var tableHeight = this.getTableHeight(filterHeight)
        return tableHeight;
      }
    },
    mounted () {
      this.startDate = moment.utc(moment().subtract(1, 'days').format('YYYY-MM-DD 00:30:00')).format();
      this.endDate = moment.utc(moment().format('YYYY-MM-DD 00:30:00')).format();
      this.searchRows();
    }
  }
</script>
<style >
.forms .el-dialog--small{
    width:1000px!important;
}
</style>
